<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>14-DOM 课堂练习</title>
</head>

<body>
  <img id="h1" src="img/off.gif"> <br><br>
  <div class="cls">杰普软件</div> <br>
  <div class="cls">Java 程序员</div> <br>
  <input type="checkbox" name="hobby" onclick="fn1()"> 电影
  <input type="checkbox" name="hobby" onclick="fn1()"> 旅游
  <input type="checkbox" name="hobby" onclick="fn1()"> 游戏

</body>
<script>
  function fn1(checkBox) {
    // 检查是否所有复选框都被选中
    const checkboxes = document.querySelectorAll('input[name="hobby"]');
    let allChecked = true;
    for (let i = 0; i < checkboxes.length; i++) {
      if (!checkboxes[i].checked) {
        allChecked = false;
        break;
      }
    }
    // 根据所有复选框的选中状态切换图片
    if (allChecked) {
      var img = document.getElementById('h1');
      img.src = "img/on.gif";
      //2. 将所有div标签的内容后面加上: very good (红色字体) -- <fontcolor='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
    const div = divs[i];
    div.innerHTML += " <font color='red'>very good</font>";
    }
    // //3. 使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
    const check = ins[i];
    check.checked = true;//选中
    }
        } else {
        var img = document.getElementById('h1');
        img.src = "img/off.gif";
        }
    }
</script>

</html>